<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>web12-1</title>
		<style>
			#canvas{ border-width: 1jpx;
					 border-style: dotted;
					 border-color: black;
					 width: 1800px;
					 height: 1600px;	
			}
		</style>
		<script>
			var ctx;	//전역변수로 선언
			window.onload=function(){
				console.log("시작");
				document.getElementById("canvas");
				ctx=canvas.getContext("2d");
				if(ctx==null){
					alert("canvas를 지원하지 않습니다");
					return;
				}
				console.log("canvas를 지원합니다");
				// fill 채우는 style스타일로 black 컬
				ctx.fillstyle="black";
				// x좌표, y좌표, 가로길이, 세로길이, 왼쪽 위가 (0,0)
				ctx.fillRect(10,10,10,10);
				ctx.fillRect(20,19,10,10);
				ctx.fillStyle="gray";
				ctx.fillRect(50,10,10*2,10);
				ctx.fillstyle="rgb(50,200,30)";
				ctx.fillRect(80,10,10*2,10);
				for(i=0 ; i<15; i++){
					ctx.fillRect(i*20+10, 30, i, 10);
			}
			canvasWidth=canvas.width;
			backWidth=back.width;
			console.log("캔버스길이: ",canvasWidth);
		}
				var x=10, y=50;	//주인공의 위치
				var backx=0, backy=0;	//배경의 위
				var goRightBack=true;	//배경의 이동방향
				var backWidth;	//배경의 가로길이
				var canvasWidth;
				var goRight=true;
				var back=new Image();
				back.src="angriBird.jpg";	//배경그림 셋팅
				function nemo(){
					//배경
					//이미지출력할 x좌표, 이미지 출력할 y좌표, 이미지
					//ctx.drawImage(sx, sy, swidth, sheight, dx, dy, dWidth, dHeight)
					
					//배경의 위치 셋팅하기
					//배경의 가로가 1000  캔버스 가로가 200
					//배경의 x가 -800일때 처음으로 돌려야 합니다
					//if(  -801*(-1) > 1000-200)
					if(backx*(-1) > backWidth-canvasWidth){
						backx=0;
					}
					backx -= 20;	//항상 오른쪽으로 이동
					ctx.drawImage(back,backx,-700);	//배경그림
					
					if(x>canvasWidth){	//캐릭터가 화면우측으로 나
						goRight=false;
					}else if(x<0){	//캐릭터가 왼쪽으로 나
						goRight=true;
					}
					//캐릭터 이동 위치
					if(goRight) x+=10;
					else        x-=10;
					
					// 0~255까지의 정수가 return 됩니다
					r=Math.ceil(Math.random()*255);
					g=Math.ceil(Math.random()*255);					
					console.log("r",r);
					ctx.fillStyle="rgb("+r+","+g+",50)";
					ctx.fillRect(x, y, 10, r/2);
				}
				function nemoDraw(){
					//nemo()를 0.1초마다 호출해
					setInterval(nemo, 100);
				}
		</script>
	</head>
	<body>
		<h3> 그림그리기 </h3>
		<button onclick="nemoDraw()">네모 움직이기</button>
		<canvas id="canvas">
		</canvas>
	</body>
</html>

